$(function () {

  const hello = $('.hello');
  const Admit = $('.navAdmit');
  const Reg = $('.navReg');
  const quit = $('.quit');

  let goodsName = '';

  let num = 8;
  // 第几页
  let page = 1;
  // 总页数  
  let total;

  let sortName = 'goods_id';

  let sortType = 1;
  number();

  // 1.1获取谁在登录
  let admit = localStorage.getItem('someone');
  // admit ? hello.html(admit) : hello.html('考拉欢迎你');
  // 1.3处理登录后事件(显示登录名等)
  if (admit) {
    hello.html(admit);
    Admit.hide();
    Reg.hide();
  }

  const oPage = $('.page');
  const oPrev = $('.prev');
  const oNext = $('.next');


  // 2.搜索
  const okw = $('.search');
  const car = $('.h_car')

  car.click(function () {
    console.log(666);
    goodsName = okw.val();
    if (goodsName) {
      page = 1;
      sortName = 'goods_id';
      sortType = 1;
      oPrev.addClass('off');
      oNext.removeClass('off');
      number();
    } else {
      number();
    }

  })

  // 3.排序
  const oPrice = $('.sortPrice');
  const oXL = $('.sortXl');

  oPrice.on('change',
    function () {
      sortType = oPrice.val();  // 1 2
      // goods_price  价格
      sortName = 'goods_price';
      number();
    })

  oXL.on('change', function () {
    sortType = oXL.val();  // 1 2
    // goods_xl 销量
    sortName = 'good_xl';
    number();
  })

  // 4.事件委托
  oPage.on('click', function (e) {
    // 下翻页
    if (e.target.className === 'next') {
      page++;
      if (page >= total) {
        $(e.target).addClass('off');
      }
      number();
      // dot(page);
      if (oPrev.hasClass('off')) {
        oPrev.removeClass('off')
      }
      return;
    }

    // 上翻页
    if (e.target.className === 'prev') {
      page--;
      if (page === 1) {
        $(e.target).addClass('off');
      }
      number();

      // 给下翻页清除off
      if (oNext.hasClass('off')) {
        oNext.removeClass('off')
      }
    }

    if (e.target.className === 'work') {
      page = $(e.target).text();
      if (page == 1) {
        $(e.target).prev().addClass('off');
      } else {
        oPrev.removeClass('off');
      }
      number();
      if (page == $('.work').length) {
        $(e.target).next().addClass('off');
      } else {
        oNext.removeClass('off');
      }
    }
  })


  // 5.小点切换
  function dot(page) {
    console.log(page);
    if (page == $('.work').length) {
      $('.work').removeClass('active').eq(page - 1).addClass('active');
    } else {
      $('.work').removeClass('active').eq(page - 1).addClass('active');
    }
  }




  function number() {
    goods({
      kw: goodsName,
      num: num,
      page: page,
      sortName: sortName,
      sortType: sortType
    }).then(res => {
      // console.log();
      const { status, msg, data } = res;
      const goodSum = $('.goodSum');
      if (status) {
        // console.log(res);
        let html = '';
        data.forEach(v => {
          const { goods_price, goods_des, goods_img, goods_point, goods_id } = v;
          html += `
      <li class="goods">
        <a href="../html/5.detail.html?id=${goods_id}">
          <img
            src="${goods_img}"
            alt="">
          <div class="goods_desc">
            <p class="detail">
              <span class="new">新品</span>
              <span class="word">${goods_des}</span>
            </p>
            <p class="price">${goods_price}</p>
            <p class="screen">${goods_point}</p>
          </div>
        </a>
      </li>
      `
        });
        goodSum.html(html);

        // 页数不能被整除  ---- 向上取整
        total = Math.ceil(res.total / num);
        let square = '';
        for (let i = 1; i <= total; i++) {
          square += `
          <a href="javascript:;" class="work">${i}</a>
          `
        }

        $('a').remove('.work');
        oPrev.after(square);
        dot(page);


      } else {
        alert(msg);
      }

    })
  }



})